import { reactive } from 'vue';
import type { TooltipState } from '../type';

// 常量定义
const TOOLTIP_MARGIN = 10; // 提示框与元素的间距
const SHOW_DELAY = 300; // 显示延迟，避免快速移动时频繁触发

/**
 * 创建提示框模块
 */
export function tooltipModule() {
  // 提示框状态
  const tooltip = reactive<TooltipState>({
    visible: false,
    content: '',
    x: 0,
    y: 0
  });

  /**
   * 计算提示框位置
   * @param target 目标元素
   * @returns 计算后的位置坐标
   */
  /**
   * 计算提示框位置
   * @param target 目标元素
   * @returns 计算后的位置坐标
   */
  const calculateTooltipPosition = (target: HTMLElement): { x: number; y: number } => {
    try {
      // 获取目标元素位置信息
      const targetRect = target.getBoundingClientRect();
      // 获取视窗 尺寸
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;

      // 估计tooltip尺寸（实际渲染前）
      const tooltipWidth = Math.min(300, Math.max(100, targetRect.width));
      const tooltipHeight = 30;

      // 默认位置：在目标元素上方居中
      console.log(targetRect.width);
      let x = targetRect.right - tooltipWidth / 2;
      let y = targetRect.bottom - tooltipHeight / 2;

      // 水平边界检查
      if (x < 10) {
        x = 10;
      } else if (x + tooltipWidth > viewportWidth - 10) {
        x = viewportWidth - tooltipWidth - 10;
      }

      // 垂直方向检查
      if (y < 10) {
        // 如果上方空间不足，显示在元素下方
        y = targetRect.bottom + TOOLTIP_MARGIN;
      } else if (y + tooltipHeight > viewportHeight - 10) {
        // 如果上方空间足够但tooltip会超出视窗下方，则调整到视窗内
        y = viewportHeight - tooltipHeight - 10;
      }
      return { x, y };
    } catch (error) {
      console.warn('Error calculating tooltip position:', error);
      return { x: 0, y: 0 };
    }
  };

  /**
   * 检查元素文本是否溢出
   * @param element 要检查的元素
   * @returns 是否溢出
   */
  const isTextOverflow = (element: HTMLElement): boolean => {
    return element.scrollWidth > element.clientWidth;
  };

  /**
   * 显示提示框
   * @param event 鼠标事件
   * @param content 提示内容
   */
  let timeoutId: number | null = null;
  const showTooltip = (event: MouseEvent, content: any) => {
    // 验证参数并确保content是字符串类型
    if (!event || content === null || content === undefined) {
      return;
    }

    // 将content转换为字符串
    const contentStr = typeof content === 'string' ? content : String(content);

    // 检查内容是否为空
    if (contentStr.trim() === '') {
      return;
    }

    // 获取目标元素
    const target = event.currentTarget as HTMLElement;
    if (!target) return;

    // 找到包含文本的实际元素（.cell-content 或 .header-label）
    let contentElement = target;
    if (target.classList && !target.classList.contains('cell-content') && !target.classList.contains('header-label')) {
      const cellContent = target.querySelector('.cell-content');
      const headerLabel = target.querySelector('.header-label');
      contentElement = (cellContent || headerLabel || target) as HTMLElement;
    }

    // 判断是否需要显示tooltip
    let shouldShowTooltip = isTextOverflow(contentElement);

    // 如果不需要显示tooltip，则返回
    if (!shouldShowTooltip) {
      return;
    }

    // 清除之前的定时器
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    // 设置新的定时器
    timeoutId = window.setTimeout(() => {
      // 设置内容和可见性
      tooltip.content = contentStr;
      tooltip.visible = true;

      // 下一帧计算位置
      requestAnimationFrame(() => {
        const position = calculateTooltipPosition(contentElement);
        tooltip.x = position.x;
        tooltip.y = position.y;
      });
    }, SHOW_DELAY) as unknown as number;
  };

  /**
   * 隐藏提示框
   */
  const hideTooltip = () => {
    // 清除定时器
    if (timeoutId) {
      clearTimeout(timeoutId);
      timeoutId = null;
    }

    // 重置状态
    tooltip.visible = false;
    tooltip.content = '';
    tooltip.x = 0;
    tooltip.y = 0;
  };

  return {
    tooltip,
    showTooltip,
    hideTooltip
  };
}
